<template>
  <div class="waveWrapper waveAnimation">
    <div class="infor-main">
      <div class="infor-top" @click="flipx" :class="{'rotate360':showAnimate}">
        <p>管理人员：大连大学智能科技创新创业团队</p>
      </div>
      <div class="infor-bot">
        <div class="timer">
          <timeScreen></timeScreen>
        </div>
        <div class="text-idea">
          <div>
            <i class="el-icon-loading"></i>
          </div>
          <p>项目正在建造中...</p>
        </div>
      </div>
    </div>
    <div class="waveWrapperInner bgTop">
      <div class="wave waveTop"></div>
    </div>
    <div class="waveWrapperInner bgMiddle">
      <div class="wave waveMiddle"></div>
    </div>
    <div class="waveWrapperInner bgBottom">
      <div class="wave waveBottom"></div>
    </div>
  </div>
</template>

<script>
import timeScreen from '../../../components/time-screen'

export default {
  name: "infor",
  data(){
    return{
      showAnimate: false
    }
  },
  components:{
    timeScreen
  },
  methods:{
    flipx(){
      this.showAnimate = !this.showAnimate
    }
  }
}
</script>

<style scoped lang="less">
  @keyframes rotate360 {
    100% {
      transform: scaleX(-1);
    }
  }
  .rotate360 {
    animation: rotate360 .5s ease-out 0s;
  }
  .infor-main{
    height: 45vh;
    width: 76vw;
    position: absolute;
    top: 17vh;
    left: 12vw;
    box-sizing: border-box;
    font-size: 2vh;
    z-index: 9999;
    color: white;
    .infor-top{
      height: 15vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background-color: #44a299;
      border-radius: 40% 40% 0 0;
    }
    .infor-bot{
      height: 30vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient(to top, #44a299 20%, #1f1fcd 80%);
      .text-idea{
        display: flex;
        margin-top: 2vh;
        align-items: center;
        justify-content: center;
        color: orange;
      }
    }
  }
  @keyframes move_wave {
    0% {
      transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
      transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
      transform: translateX(-50%) translateZ(0) scaleY(1)
    }
  }
  .waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 84vh;
  }
  .waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #44a299 20%, #1f1fcd 80%);
  }
  .bgTop {
    z-index: 15;
    opacity: 0.5;
  }
  .bgMiddle {
    z-index: 10;
    opacity: 0.75;
  }
  .bgBottom {
    z-index: 5;
  }
  .wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
  }
  .waveTop {
    background-size: 50% 100px;
    background-image: url("../../../assets/backjpg/wave-top.png");
  }
  .waveAnimation .waveTop {
    animation: move-wave 3s;
    -webkit-animation: move-wave 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  .waveMiddle {
    background-size: 50% 120px;
    background-image: url("../../../assets/backjpg/wave-mid.png");
  }
  .waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
  }
  .waveBottom {
    background-size: 50% 100px;
    background-image: url("../../../assets/backjpg/wave-bot.png");
  }
  .waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
  }
  
</style>